<template>
  <div id="app">
    <div class="app-player">
      <!-- 1. 音乐盒顶部的开始 -->
      <div class="app-player-header">
        <my-music-header @getlist="handleGetMusicList"></my-music-header>
      </div>
      <!-- 1. 音乐盒顶部的结束 -->
      <!-- 2. 音乐盒中间内容开始 -->
      <div class="app-player-content">
        <my-music-content
          :is-audio-playing="isAudioPlaying"
          :song-list="songList"
          @geturl="handleGetSongUrl"
          @getmv="handleGetMVUrl"
        ></my-music-content>
      </div>
      <!-- 2. 音乐盒中间内容结束 -->
      <div class="app-player-footer">
        <my-music-footer
          :song-url="songUrl"
          @pause="handlePause"
          @play="handlePlay"
        ></my-music-footer>
      </div>
    </div>
    <div :class="['app-mask-content', { hidden: hiddenVedio }]">
      <div class="app-player-close" @click.stop="handleCloseMV">X</div>
      <div class="app-player-vedio">
        <video
          ref="vedio"
          :src="mvUrl"
          controls="controls"
          loop="loop"
          autoplay="autoplay"
        ></video>
      </div>
      <div class="app-mask"></div>
    </div>
  </div>
</template>

<script>
// import axios from "axios"
// window.axios = axios;
import MyMusicHeader from "@/components/my-music-header";
import MyMusicContent from "@/components/my-music-content";
import MyMusicFooter from "@/components/my-music-footer";
export default {
  name: "App",
  data: function () {
    return {
      songList: [],
      songUrl: "", // 歌曲的url
      mvUrl: "",
      hiddenVedio: true, // 默认情况下不显示 vedio
      isAudioPlaying: true,
    };
  },
  components: {
    "my-music-header": MyMusicHeader,
    "my-music-content": MyMusicContent,
    "my-music-footer": MyMusicFooter,
  },
  methods: {
    handlePlay: function (isAudioPlaying) {
      this.isAudioPlaying = isAudioPlaying;
    },
    handlePause: function (isAudioPlaying) {
      // debugger
      this.isAudioPlaying = isAudioPlaying;
    },
    handleCloseMV: function () {
      this.hiddenVedio = true;
      // 关闭视频
      this.$refs.vedio.pause();
    },
    handleGetMusicList: function (songList) {
      this.songList = songList;
    },
    handleGetSongUrl: function (songUrl) {
      this.songUrl = songUrl;
    },
    handleGetMVUrl: function (mvURL) {
      this.mvUrl = mvURL;
      // 显示弹出窗
      this.hiddenVedio = false;
    },
  },
};
</script>

<style>
#app {
  background: url(./assets/images/bg.jpeg) no-repeat;
  width: 100vw;
  height: 100vh;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  --themeColor: #1baad5;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.app-player {
  width: 800px;
  height: 600px;
  border-radius: 10px;
}
.app-player-header {
  height: 60px;
  width: 100%;
  background-color: var(--themeColor);
}
.app-player-content {
  height: 480px;
  width: 100%;
  display: flex;
  border-bottom: 1px dotted var(--themeColor);
  background-color: rgba(255, 255, 255, 0.5);
}

.app-player-footer {
  height: 60px;
  width: 100%;
  background-color: var(--themeColor);
}
.app-mask {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  background-color: black;
}
.app-player-vedio {
  /* background-color: #fff; */
  transform: translate(-50%, -50%);
  left: 50%;
  height: 800px;
  width: 600px;
  position: fixed;
  z-index: 999;
  top: 50%;
}
video {
  height: 800px;
  width: 600px;
}
.app-player-close {
  position: fixed;
  color: white;
  top: 10px;
  right: 10px;
  z-index: 1000;
}
.app-mask-content {
}
.hidden {
  display: none;
}
</style>
